<template>
  <div class="q-pa-md">
    <t-layout
      view="hHh Lpr lff"
      container
      style="height: 300px"
      class="shadow-2 rounded-borders"
    >
      <t-header elevated :class="$q.dark.isActive ? 'bg-primary' : 'bg-black'">
        <t-toolbar>
          <t-btn flat @click="drawer = !drawer" round dense icon="menu" />
          <t-toolbar-title>Header</t-toolbar-title>
        </t-toolbar>
      </t-header>

      <t-drawer v-model="drawer" show-if-above :width="200" :breakpoint="500">
        <t-scroll-area class="fit">
          <t-list padding class="menu-list">
            <t-item clickable v-ripple>
              <t-item-section avatar>
                <t-icon name="inbox" />
              </t-item-section>

              <t-item-section> Inbox </t-item-section>
            </t-item>

            <t-item active clickable v-ripple>
              <t-item-section avatar>
                <t-icon name="star" />
              </t-item-section>

              <t-item-section> Star </t-item-section>
            </t-item>

            <t-item clickable v-ripple>
              <t-item-section avatar>
                <t-icon name="send" />
              </t-item-section>

              <t-item-section> Send </t-item-section>
            </t-item>

            <t-item clickable v-ripple>
              <t-item-section avatar>
                <t-icon name="drafts" />
              </t-item-section>

              <t-item-section> Drafts </t-item-section>
            </t-item>
          </t-list>
        </t-scroll-area>
      </t-drawer>

      <t-page-container>
        <t-page padding>
          <p v-for="n in 15" :key="n">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil
            praesentium molestias a adipisci, dolore vitae odit, quidem
            consequatur optio voluptates asperiores pariatur eos numquam rerum
            delectus commodi perferendis voluptate?
          </p>
        </t-page>
      </t-page-container>
    </t-layout>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        drawer: ref(false),
      };
    },
  };
</script>

<style lang="sass" scoped>
  .menu-list .q-item
    border-radius: 0 32px 32px 0
</style>
